<template>
  <div class="admin-layout">
    <!-- 侧边菜单栏 -->
    <div :class="['sidebar', { collapsed: isCollapse }]">
      <div class="logo">
        <el-icon v-if="isCollapse" size="24" style="color: #409eff;">
          <Monitor />
        </el-icon>
        <span v-else class="logo-text">Admin2025</span>
      </div>
      
      <!-- 菜单 -->
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :unique-opened="true"
        class="sidebar-menu"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409eff"
        @select="handleMenuSelect"
      >
        <el-menu-item index="/dashboard">
          <el-icon><Monitor /></el-icon>
          <span>工作台</span>
        </el-menu-item>
        
        <el-sub-menu index="analytics">
          <template #title>
            <el-icon><DataAnalysis /></el-icon>
            <span>分析页</span>
          </template>
          <el-menu-item index="/analytics/overview">
            <el-icon><TrendCharts /></el-icon>
            <span>概览</span>
          </el-menu-item>
          <el-menu-item index="/analytics/report">
            <el-icon><Document /></el-icon>
            <span>报告</span>
          </el-menu-item>
        </el-sub-menu>
        
        <el-sub-menu index="commerce">
          <template #title>
            <el-icon><Shop /></el-icon>
            <span>电子商务</span>
          </template>
          <el-menu-item index="/commerce/products">
            <el-icon><Box /></el-icon>
            <span>商品管理</span>
          </el-menu-item>
          <el-menu-item index="/commerce/orders">
            <el-icon><List /></el-icon>
            <span>订单管理</span>
          </el-menu-item>
        </el-sub-menu>
        
        <el-sub-menu index="content">
          <template #title>
            <el-icon><Document /></el-icon>
            <span>文章列表</span>
          </template>
          <el-menu-item index="/content/articles">
            <el-icon><DocumentCopy /></el-icon>
            <span>文章管理</span>
          </el-menu-item>
          <el-menu-item index="/content/categories">
            <el-icon><Collection /></el-icon>
            <span>分类管理</span>
          </el-menu-item>
        </el-sub-menu>
        
        <el-sub-menu index="report">
          <template #title>
            <el-icon><Files /></el-icon>
            <span>报告管理</span>
          </template>
          <el-menu-item index="/report/daily">
            <el-icon><Calendar /></el-icon>
            <span>日报</span>
          </el-menu-item>
          <el-menu-item index="/report/monthly">
            <el-icon><DataBoard /></el-icon>
            <span>月报</span>
          </el-menu-item>
        </el-sub-menu>
        
        <el-sub-menu index="storage">
          <template #title>
            <el-icon><FolderOpened /></el-icon>
            <span>文章存档</span>
          </template>
          <el-menu-item index="/storage/archived">
            <el-icon><Files /></el-icon>
            <span>已归档</span>
          </el-menu-item>
        </el-sub-menu>
        
        <el-sub-menu index="operations">
          <template #title>
            <el-icon><Tools /></el-icon>
            <span>服务管理</span>
          </template>
          <el-menu-item index="/operations/services">
            <el-icon><Service /></el-icon>
            <span>服务列表</span>
          </el-menu-item>
          <el-menu-item index="/operations/monitor">
            <el-icon><Monitor /></el-icon>
            <span>监控</span>
          </el-menu-item>
        </el-sub-menu>
        
        <el-sub-menu index="system">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="/system/users">
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="/system/roles">
            <el-icon><Avatar /></el-icon>
            <span>角色管理</span>
          </el-menu-item>
          <el-menu-item index="/system/logs">
            <el-icon><Document /></el-icon>
            <span>日志管理</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    
    <!-- 右侧内容区域 -->
    <div class="content-wrapper">
      <!-- 头部 -->
      <div class="header">
        <div class="header-left">
          <el-button 
            text 
            @click="isCollapse = !isCollapse"
            class="collapse-btn"
          >
            <el-icon size="20">
              <Expand v-if="isCollapse" />
              <Fold v-else />
            </el-icon>
          </el-button>
          
          <!-- 面包屑导航 -->
          <el-breadcrumb class="breadcrumb">
            <el-breadcrumb-item 
              v-for="item in breadcrumbs" 
              :key="item.path"
              :to="item.path"
            >
              {{ item.name }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        
        <div class="header-right">
          <!-- 搜索 -->
          <el-input
            v-model="searchValue"
            placeholder="搜索"
            class="search-input"
            :prefix-icon="Search"
            clearable
          />
          
          <!-- 通知 -->
          <el-badge :value="12" class="notification-badge">
            <el-button text>
              <el-icon size="20"><Bell /></el-icon>
            </el-button>
          </el-badge>
          
          <!-- 用户信息 -->
          <el-dropdown>
            <span class="user-info">
              <el-avatar size="small" :src="userAvatar">
                <el-icon><User /></el-icon>
              </el-avatar>
              <span class="username">管理员</span>
              <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <el-icon><User /></el-icon>
                  个人中心
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-icon><Setting /></el-icon>
                  设置
                </el-dropdown-item>
                <el-dropdown-item divided>
                  <el-icon><SwitchButton /></el-icon>
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      
      <!-- 标签页 -->
      <div class="tabs-container">
        <el-tabs 
          v-model="activeTab" 
          type="card" 
          closable 
          @tab-remove="removeTab"
          @tab-click="handleTabClick"
          class="page-tabs"
        >
          <el-tab-pane
            v-for="tab in tabs"
            :key="tab.name"
            :label="tab.title"
            :name="tab.name"
            :closable="tab.closable"
          />
        </el-tabs>
      </div>
      
      <!-- 主内容区域 -->
      <div class="main-content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

export default {
  name: 'AdminLayout',
  setup() {
    const router = useRouter()
    const route = useRoute()
    
    // 响应式数据
    const isCollapse = ref(false)
    const searchValue = ref('')
    const activeTab = ref('dashboard')
    const userAvatar = ref('')
    
    // 标签页数据
    const tabs = ref([
      { name: 'dashboard', title: '工作台', closable: false }
    ])
    
    // 路由名称映射
    const routeNames = {
      '/dashboard': '工作台',
      '/analytics/overview': '概览',
      '/analytics/report': '报告',
      '/commerce/products': '商品管理',
      '/commerce/orders': '订单管理',
      '/content/articles': '文章管理',
      '/content/categories': '分类管理',
      '/report/daily': '日报',
      '/report/monthly': '月报',
      '/storage/archived': '已归档',
      '/operations/services': '服务列表',
      '/operations/monitor': '监控',
      '/system/users': '用户管理',
      '/system/roles': '角色管理',
      '/system/logs': '日志管理'
    }
    
    // 计算属性
    const activeMenu = computed(() => {
      return route.path
    })
    
    const breadcrumbs = computed(() => {
      const pathSegments = route.path.split('/').filter(Boolean)
      const breadcrumbs = []
      
      let currentPath = ''
      for (const segment of pathSegments) {
        currentPath += `/${segment}`
        const name = routeNames[currentPath]
        if (name) {
          breadcrumbs.push({ name, path: currentPath })
        }
      }
      
      return breadcrumbs
    })
    
    // 方法
    const handleMenuSelect = (key) => {
      router.push(key)
      addTab(key)
    }
    
    const addTab = (path) => {
      const title = routeNames[path]
      if (!title) return
      
      const tabName = path.replace(/\//g, '_')
      const existingTab = tabs.value.find(tab => tab.name === tabName)
      
      if (!existingTab) {
        tabs.value.push({
          name: tabName,
          title: title,
          closable: tabName !== 'dashboard'
        })
      }
      
      activeTab.value = tabName
    }
    
    const removeTab = (tabName) => {
      const index = tabs.value.findIndex(tab => tab.name === tabName)
      if (index > -1) {
        tabs.value.splice(index, 1)
        
        // 如果关闭的是当前激活的标签，切换到前一个标签
        if (activeTab.value === tabName) {
          const newActiveTab = tabs.value[Math.max(0, index - 1)]
          activeTab.value = newActiveTab.name
          const path = newActiveTab.name.replace(/_/g, '/')
          router.push(path)
        }
      }
    }
    
    const handleTabClick = (tab) => {
      const path = tab.props.name.replace(/_/g, '/')
      router.push(path)
    }
    
    // 监听路由变化
    watch(() => route.path, (newPath) => {
      addTab(newPath)
    }, { immediate: true })
    
    return {
      isCollapse,
      searchValue,
      activeTab,
      userAvatar,
      tabs,
      activeMenu,
      breadcrumbs,
      handleMenuSelect,
      removeTab,
      handleTabClick
    }
  }
}
</script>

<style scoped>
.admin-layout {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.sidebar {
  background-color: #304156;
  transition: width 0.28s;
  overflow: hidden;
  height: 100vh;
  flex-shrink: 0;
  width: 250px;
}

.sidebar.collapsed {
  width: 64px;
}

.logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #434a5a;
  color: #409eff;
  flex-shrink: 0;
}

.logo-text {
  font-size: 20px;
  font-weight: bold;
  color: #409eff;
}

.sidebar-menu {
  border-right: none;
  height: calc(100vh - 60px);
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}

.sidebar-menu:not(.el-menu--collapse) {
  width: 100%;
}

.sidebar-menu.el-menu--collapse {
  width: 100%;
}

.content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  min-width: 0;
  width: 100%;
}

.header {
  background-color: #fff;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 60px;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}

.header-left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  margin-right: 20px;
}

.collapse-btn {
  margin-right: 20px;
  padding: 0;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.breadcrumb {
  margin-left: 12px;
  flex: 1;
  min-width: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
}

.search-input {
  width: 200px;
  flex-shrink: 0;
}

.notification-badge {
  cursor: pointer;
  flex-shrink: 0;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s;
  white-space: nowrap;
  flex-shrink: 0;
}

.user-info:hover {
  background-color: #f5f5f5;
}

.username {
  font-size: 14px;
  color: #303133;
}

.dropdown-icon {
  font-size: 12px;
  color: #909399;
}

.tabs-container {
  background-color: #fff;
  border-bottom: 1px solid #e4e7ed;
  padding: 0 20px;
  height: 40px;
  flex-shrink: 0;
  width: 100%;
}

.page-tabs {
  margin-top: 0;
  width: 100%;
}

.page-tabs :deep(.el-tabs__header) {
  margin-bottom: 0;
  width: 100%;
}

.page-tabs :deep(.el-tabs__nav) {
  border: none;
  width: 100%;
}

.page-tabs :deep(.el-tabs__item) {
  border: 1px solid #e4e7ed;
  border-bottom: none;
  margin-right: 4px;
  border-radius: 4px 4px 0 0;
}

.page-tabs :deep(.el-tabs__item.is-active) {
  background-color: #f0f9ff;
  color: #409eff;
  border-color: #409eff;
}

.main-content {
  background-color: #f5f5f5;
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* 全局下拉菜单层级 */
:global(.el-dropdown-menu),
:global(.el-popper) {
  z-index: 9999 !important;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .search-input {
    width: 150px;
  }
}

@media (max-width: 768px) {
  .search-input {
    width: 120px;
  }
  
  .header-right {
    gap: 10px;
  }
  
  .username {
    display: none;
  }
  
  .header {
    padding: 0 15px;
  }
  
  .tabs-container {
    padding: 0 15px;
  }
  
  .main-content {
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .breadcrumb {
    display: none;
  }
  
  .search-input {
    width: 100px;
  }
  
  .header {
    padding: 0 10px;
  }
  
  .collapse-btn {
    margin-right: 10px;
  }
}
</style>
